<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- becomes the css class of the li element -->
<c:set var="is_ship_edit_mode" value="true" scope="request"/>

<html>
	<head>
		<title>Edit Ship</title>
		<link rel="stylesheet" type="text/css" href="css/datepicker/datepicker.css" />
		<script type="text/javascript" src="<c:out value='js/datepicker.js'/>"></script>
		<script type="text/javascript">
		
			function showHideElements(select) {
				
				document.getElementById("tanker").style.display = 'none';
				document.getElementById("cargo").style.display = 'none';
				document.getElementById("cruise ship").style.display = 'none';
				
				// obtain value from select
				// based on value -> show hide fields
				document.getElementById(select.value).style.display = 'block';
				
			}
			
			function init() {
				var value = document.getElementById('shipTypeSelect').value;
				document.getElementById(value).style.display ='block';
			}
			
		</script>
	</head>
	
	<body onload="init()">
		<form:form method="POST" commandName="ship">
			<div class="column left">
				<p>
					<label for="name">Ship name:</label>
					<form:input path="name" cssClass="text"/>
					<span class="info">Ex: Nava scoala "Mircea"</span>
				</p>
				<p>
					<label for="totalCapacity">Total Capacity:</label>
					<form:input path="totalCapacity" cssClass="text"/>
					<span class="info">Ex: 100t</span>
				</p>
				<p>
					<label for="payload">Payload:</label>
					<form:input path="payload" cssClass="text"/>
					<span class="info">Ex: 80t</span>
				</p>
				<p id="plength">
					<label for="length">Length:</label>
					<form:input path="length" cssClass="text"/>
					<span class="info">Ex: 60m</span>
				</p>
				<p>
					<label for="draft">Draft:</label>
					<form:input path="draft" cssClass="text"/>
					<span class="info">Ex: 10m</span>
				</p>
				<p>
					<label for="speed">Speed:</label>
					<form:input path="speed" cssClass="text"/>
					<span class="info">Ex: 10 knots</span>
				</p>
				<p>
					<input type="submit" value="Submit">
					or
					<a href="<c:url value='ships.htm'/>">Cancel</a>
				</p>
				
			</div>
			<div class="column right">
				<p> 
					<label for="shipType">Ship Type:</label>
					<form:select id="shipTypeSelect" path="shipType" cssClass="text" onChange="showHideElements(this)">
						<form:options items="${shipTypes}"/>
					</form:select>
				</p>
				
				<div id="tanker" style="display:none">
					<p>
						<label for="fuelType">Transported Fuel:</label>
						<form:select path="fuelType" cssClass="text">
							<form:option value="Gasoline"/>
							<form:option value="Diesel"/>
						</form:select>
						<span class="info">Please select</span>
					</p>
				</div>
				
				<div id="cargo" style="display:none">
					<p> 
						<label for="transportType">Transport Type:</label>
						<form:input path="transportType" cssClass="text"/>
						<span class="info">Ex: Cereale, Perisabile</span>
					</p>
					<p>
						<label for="numberOfCranes">Number of Cranes:</label>
						<form:input path="numberOfCranes" cssClass="text"/>
						<span class="info">Ex: 3</span>
					</p>
				</div>
						
				<div id="cruise ship" style="display:none">
					<p>
						<label for="confortClass">Comfort Class:</label>
						<form:input path="confortClass" cssClass="text"/>
					</p>
					<p>
						<label for="passengersFirstClass">Number of Passengers First Class:</label>
						<form:input path="passengersFirstClass" cssClass="text"/>
					</p>
					<p>
						<label for="passengersTouristClass">Number of Passengers Tourist Class:</label>
						<form:input path="passengersTouristClass" cssClass="text"/>
					</p>
				</div>
				<p>
					<label for="fuel">Fuel type:</label>
					<form:select cssClass="text" path="fuel">
						<form:option value="Gasoline"/>
						<form:option value="Diesel"/>
					</form:select>
					<span class="info">Please select</span>
				</p>
				<p>
					<label for="baseHarbour">Base Harbour:</label>
					<form:select cssClass="text" path="baseHarbour" items="${harbours}" itemLabel="name" itemValue="id"/>
					<span class="info">Please select</span>
				</p>
				<p>
					<label for="registrationHarbour">Registration Harbour:</label>
					<form:select cssClass="text" path="registrationHarbour" items="${harbours}" itemLabel="name" itemValue="id"/>
					<span class="info">Please select</span>
				</p>
				<p>
					<label for="lastLocation">Current Location:</label>
					<form:select cssClass="text" path="lastLocation" items="${harbours}" itemLabel="name" itemValue="id"/>
					<span class="info">Please select</span>
				</p>
				<p>
					<label for="fuel">Location Report Date:</label>
					<form:input cssClass="text" path="locationReportDate" onclick="displayDatePicker('locationReportDate', this);"/>
					<span class="info">Please select</span>
				</p>
			</div>
			<div class="clear"></div>
		</form:form>
	</body>
</html>